<template>
	<view class="index">
		<u-notice-bar text="营业时间 17:30-23:59, 周末正常营业, 望客官知悉"></u-notice-bar>
		<!-- 顶部搜索 -->
		<section class="search-box">
			<u-search shape="round" disabled :showAction="false" placeholder="请输入搜索关键词"></u-search>
		</section>
		
		<!-- 顶部轮播 -->
		<section class="swiper">
			<u-swiper
			                :list="swiper_list"
			                previousMargin="30"
			                nextMargin="30"
							autoplay
			                circular
							duration="1000"
			                radius="5"
			                bgColor="#ffffff"
			        ></u-swiper>
		</section>
		
		<!-- 快速导航选项 -->
		<section class="activity-box">
			<view class="activity-option groupon-option" >
				<image src="/static/index/groupon_option.png" style="width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: 1;"></image>
			    <view class="activity-name">
			        <span>所有商品</span>
			        <img src="/static/index/next_mini.png" style="width: 12rpx;height: 25rpx" alt="">
			    </view>
			    <view class="activity-desc"></view>
			</view>
			
			<view class="activity-option charge-option" >
				<image src="/static/index/charge_option.png" style="width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: 1;"></image>
			    <view class="activity-name">
			        <span>钱包充值</span>
			        <img src="/static/index/next_mini.png" style="width: 12rpx;height: 25rpx" alt="">
			    </view>
			    <view class="activity-desc">充3000送1000</view>
			</view>

		</section>
		
		<!-- 精选 -->
		<section class="hot-box">
			<view class="hot-title">
				<span class="hot-desc">热卖商品</span>
				<!-- <span class="hot-more" @click="show_more_hot_goods_visible = true">更多 ></span> -->
			</view>
			
		<!-- 	<view class="hot-content">
				
				<view class="hot-box" v-for="(item, index) in hot_list" :key="index">
					<view class="hot-tag">
						<img src="../../static/index/like-active.png" style="width: 30rpx" alt="">
						<span style="margin:0 20rpx">98</span>
					</view>
				    <img class="hot-img" :src="item.thumb" />
				</view>
			</view> -->
			
			<u-scroll-list @right="right" @left="left" indicatorActiveColor="#fda085">
			        <view class="scroll-list" style="flex-direction: row;">
			            <view
			                    class="scroll-list__goods-item"
			                    v-for="(item, index) in hot_list"
			                    :key="index"
			                    :class="[(index === 9) && 'scroll-list__goods-item--no-margin-right']"
			            >
			                <image class="scroll-list__goods-item__image" :src="item.thumb"></image>
			                <text class="scroll-list__goods-item__text">￥{{ item.price }}</text>
			            </view>
			            <view class="scroll-list__show-more">
			                <text class="scroll-list__show-more__text">查看更多</text>
			                <u-icon name="arrow-leftward" color="#fda085" size="12"></u-icon>
			            </view>
			        </view>
			    </u-scroll-list>

		</section>
		
		<TabBar></TabBar>
		
		
		
		
	<!-- 	<van-popup
		  v-model:show="show_more_hot_goods_visible"
		  position="bottom"
		  round
		  :style="{ height: '90vh' }"
		>
			
			
			<view class="hot-goods-list">
				<view class="hot-goods-title">
					<span>热门商品</span>
					<img src="../../static/index/window_close.png" @click="show_more_hot_goods_visible = false" style="width: 50rpx" alt="">
				</view>
				<van-pull-refresh
				  v-model="isLoading"
				  success-text="刷新成功"
				  @refresh="onRefresh"
				>
				  <view class="hot-goods-content">
				  	<GoodsCard v-for="(item, index) in 5"></GoodsCard>
				  </view>
				</van-pull-refresh>
				
				
			</view>
			
		</van-popup> -->
	</view>
</template>

<script setup>
	import TabBar from "../components/tab_bar.vue"
	import GoodsCard from "../components/goods_card.vue"
	import { ref } from "vue"
	
	// const show_more_hot_goods_visible = ref(false);
	const isLoading = ref(false);
	const onRefresh = () => {
		setTimeout(() => {
			isLoading.value = false
		}, 1000)
	}
	const swiper_list =ref([
                    'https://cdn.uviewui.com/uview/swiper/swiper3.png',
                    'https://cdn.uviewui.com/uview/swiper/swiper2.png',
                    'https://cdn.uviewui.com/uview/swiper/swiper1.png',
                ]); 
				const hot_list = [{
				price: '230.5',
                thumb: 'https://cdn.uviewui.com/uview/goods/1.jpg'
			}, {
				price: '74.1',
                thumb: 'https://cdn.uviewui.com/uview/goods/2.jpg'
			}, {
				price: '8457',
                thumb: 'https://cdn.uviewui.com/uview/goods/6.jpg'
			}, {
				price: '1442',
                thumb: 'https://cdn.uviewui.com/uview/goods/5.jpg'
			}, {
				price: '541',
                thumb: 'https://cdn.uviewui.com/uview/goods/2.jpg'
			}, {
				price: '234',
                thumb: 'https://cdn.uviewui.com/uview/goods/3.jpg'
			}, {
				price: '562',
                thumb: 'https://cdn.uviewui.com/uview/goods/4.jpg'
			}, {
				price: '251.5',
                thumb: 'https://cdn.uviewui.com/uview/goods/1.jpg'
			}]
					

</script>

<style lang="scss">
	.index{
		width: 100%;
		height: 100%;
		
		.search-box{
			width: 100%;
			height: fit-content;
			margin: 35rpx 0 40rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
		}
		.swiper{
			width: 100%;
			margin: 20rpx auto;
		}
		
		.activity-box{
		    width: 90%;
		    height: 150rpx;
			margin: 40rpx auto;
		    display: flex;
		    flex-direction: row;
		    justify-content: space-between;
		    position: relative;
			
			.activity-option{
			    width: 50%;
			    height: 100%;
			    position: absolute;
			    top: 0;
				
				.activity-name,.activity-desc{
					width: calc(100% - 60rpx);
					margin: auto;
					font-size: 34rpx;
					color: #fff;
					display: flex;
					justify-content: space-between;
					align-items: center;
					z-index: 2;
					
				}
				.activity-name{
					margin-top: 20rpx;
					position: absolute;
					left: 50%;
					transform: translate(-50%, 0);
				}
				.activity-desc{
					font-size: 24rpx;
					margin-top: 10rpx;
					position: absolute;
					left: 50%;
					bottom: 15%;
					transform: translate(-50%, -15%);
				}
			
			}
			.activity-option.groupon-option{
			    // background: url("/static/index/groupon_option.png") no-repeat;	
			    // background-size: 100%;
			    left: 0
			}
			.activity-option.charge-option{
			    // background: url("/static/index/charge_option.png") no-repeat;
			    // background-size: 100%;
			    right: 0
			}
		}
		
		.hot-box{
			width: 90%;
			height: 120rpx;
			margin: 0 auto;
			.hot-title{
				width: 100%;
				height: 100rpx;
				margin: auto;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.hot-desc{
					font-family: '微软雅黑';
					font-size: 32rpx;
					color: #333;
					font-weight: 600;
				}
				.hot-more{
					font-family: '微软雅黑';
					font-size: 26rpx;
					color: #999999
				}
			}
			
			.hot-content{
				width: 100%;
				height: 300rpx;
				display: flex;
				overflow-x: scroll;
				overflow-y: hidden;
				
				.hot-box{
					position: relative;
					height: 100%;
					.hot-tag{
						position: absolute;
						left: 0;
						bottom: 0;
						width: calc(100% - 20rpx);
						height: 50rpx;
						background: rgba(255,255,255,0.5);
						border-radius: 0px 0px 10px 10px;
						color: #333333;
						font-size: 24rpx;
						display: flex;
						align-items: center;;
						justify-content: flex-end;
					}
					.hot-img{
						max-height: 100%;
						margin-right: 20rpx;
						object-fit: contain;
						border-radius: 20rpx;
						
					}
				}
				
			}
			
			
		}
		
		
		.hot-goods-list{
			.hot-goods-title{
				width: calc(100% - 30px);
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 36rpx;
				margin: 25rpx auto 0;
			}
			
			.hot-goods-content{
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				width: calc(100% - 30px);
				max-height: calc(90vh - 85rpx - 40rpx);
				margin: 0 auto;
				padding-bottom: 40rpx;
				overflow-y: scroll;
			}

			
			
		}
		
	}
	
	.scroll-list {
		@include flex(column);
	
		&__goods-item {
			margin-right: 20px;
	
			&__image {
				width: 60px;
				height: 60px;
				border-radius: 4px;
			}
	
			&__text {
				color: #f56c6c;
				text-align: center;
				font-size: 12px;
				margin-top: 5px;
			}
		}
	
		&__show-more {
			background-color: #fff0f0;
			border-radius: 3px;
			padding: 3px 6px;
			@include flex(column);
			align-items: center;
	
			&__text {
				font-size: 12px;
				width: 12px;
				color: #f56c6c;
				line-height: 16px;
			}
		}
	}

</style>

